<template>
  <div class="device-grid-container">
    <!-- 调试信息 -->
    <div v-if="!devices || devices.length === 0" class="debug-info">
      <p>暂无设备数据</p>
      <p>设备数量: {{ devices?.length || 0 }}</p>
    </div>

    <div v-else class="device-grid">
      <div
          v-for="device in devices"
          :key="device.id"
          class="device-card"
          :class="`status-${device.status}`"
      >
        <div class="device-header">
          <div class="device-icon">
            <img :src="device.icon" alt="">
          </div>
          <div class="device-name">
            <span @click="viewDeviceDetail(device)">{{ device.name }}</span>
            <el-icon class="ArrowRightBoldIcon">
              <ArrowRightBold/>
            </el-icon>
          </div>
          <div class="device-status" :class="device.status">
            <span class="status-dot"></span>
            {{ statusText[device.status] }}
          </div>
        </div>

        <div class="device-info">
          <div class="info-item-top">
            <div class="info-item-top-label">100MW/200MWH</div>
          </div>
          <div class="info-item-bottom">
            <div class="info-item-bottom-label">
              <p class="name">{{ device.Label[0].name }}</p>
              <p>
                <span class="value">
                  {{ device.Label[0].value }}
                </span>
                <span class="unit">{{ device.Label[0].unit }}</span>
              </p>

            </div>
            <div class="info-item-bottom-label">
              <p class="name">{{ device.Label[1].name }}</p>
              <p>
                <span class="value">
                  {{ device.Label[1].value }}
                </span>
                <span class="unit">{{ device.Label[1].unit }}</span>
              </p>

            </div>
            <div class="info-item-bottom-label">
              <p class="name">{{ device.Label[2].name }}</p>
              <p>
                <span class="value">
                  {{ device.Label[2].value }}
                </span>
                <span class="unit">{{ device.Label[2].unit }}</span>
              </p>

            </div>
            <div class="info-item-bottom-label">
              <p class="name">{{ device.Label[3].name }}</p>
              <p>
                <span class="value">
                  {{ device.Label[3].value }}
                </span>
                <span class="unit">{{ device.Label[3].unit }}</span>
              </p>

            </div>
          </div>
        </div>
        <div class="device-trend">
          <div
              v-if="device.showChart"
              :id="`chart-${device.id}`"
              class="chart-container"
          ></div>
          <div v-else class="empty-container">
            <el-empty description="暂无图表数据" :image-size="60"/>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import {ElMessage} from 'element-plus'
import * as echarts from 'echarts';
import {nextTick, watch} from 'vue'
const router = useRouter()
// 图表配置
const getChartOption = () => ({
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['实时功率', 'SOC'],
    bottom: 90  // 下移20px
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '0%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '实时功率',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'SOC',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
  ]
});

// 定义props
const props = defineProps({
  devices: {
    type: Array,
    required: true
  }
})

// 初始化图表
const initChart = (deviceId) => {
  nextTick(() => {
    const chartId = `chart-${deviceId}`;
    const chartDom = document.getElementById(chartId);
    if (chartDom) {
      const chart = echarts.init(chartDom);
      chart.setOption(getChartOption(), {notMerge: true});
    }
  });
};
const viewDeviceDetail = (device) => {
  router.push('/monitorManagement/operationDeviceDetail')
}
// 监听设备数据变化，为有图表的设备初始化图表
watch(() => props.devices, (newDevices) => {
  if (newDevices && newDevices.length > 0) {
    newDevices.forEach(device => {
      if (device.showChart) {
        initChart(device.id)
      }
    })
  }
}, {immediate: true, deep: true})

const statusText = {
  normal: '正常',
  abnormal: '异常',
  offline: '离线'
}

const viewDevice = (device) => {
  ElMessage.success(`查看设备: ${device.name}`)
}

// 调试信息
console.log(`DeviceGrid加载完成111`, props.devices)
</script>

<style lang="scss" scoped>
.device-grid-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
  min-height: 0;
  height: 100%; /* 确保容器有高度 */
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 12px;
  padding: 4px;
  box-sizing: border-box;
}

.device-card {
  width: auto;
  height: 320px;
  min-width: 400px;
  max-width: 450px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
}


.device-header {

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-name {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  color: #303133;

  .ArrowRightBoldIcon {
    font-size: 16px;
  }

  .ArrowRightBoldIcon:hover {
    cursor: pointer;
  }

  span:hover {
    cursor: pointer;
    border-bottom: 1px solid black; /* 蓝色下划线（可自定义色值） */
    padding-bottom: 5px; /* 核心：间距设为5px */
    /* 可选：避免元素被撑大（如需行内对齐） */

  }
}

.device-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
}

.device-status.normal {
  color: #67c23a;
}

.device-status.abnormal {
  color: #e6a23c;
}

.device-status.offline {
  color: #909399;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.device-status.normal .status-dot {
  background: #67c23a;
}

.device-status.abnormal .status-dot {
  background: #e6a23c;
}

.device-status.offline .status-dot {
  background: #909399;
}

.device-header {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  min-height: 0;
}

.device-info {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.info-item-top {
  .info-item-top-label {
    background: #636E83;
    border-radius: 4px;
    opacity: 0.5;
    padding: 4px 8px;
    color: white;
    font-weight: bold;
  }

}

.info-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .info-item-bottom-label {
    .name {
      color: #6F7A80;
      font-size: 14px;
    }

    .value {
      color: #2C2F33;
      font-size: 20px;
    }

    .unit {
      color: #6F7A80;
      font-size: 12px;
    }
  }
}

.device-trend {
  flex: 4;
  min-height: 0;
  height: 100%;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.empty-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}


.info-label {
  color: #606266;
  font-size: 14px;
}


/* 调试信息样式 */
.debug-info {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.debug-info p {
  margin: 8px 0;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }

  .device-card {
    min-width: 380px;
    max-width: 420px;
  }
}

@media (max-width: 768px) {
  .device-grid {
    grid-template-columns: 1fr;
    padding: 2px;
  }

  .device-card {
    width: auto;
    height: auto;
    min-height: 280px;
    min-width: auto;
    max-width: none;
    padding: 12px;
  }
}

/* 自定义滚动条 */
.device-grid-container::-webkit-scrollbar {
  width: 8px;
}

.device-grid-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.device-grid-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.device-grid-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>